<!--  图标形式-折线图 -->
<template>
    <div class="charts" ref="linechart"> </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'LineCharts',
    mounted() {
        this.initCharts();
    },
    methods: {
        initCharts() {
            let barCharts = echarts.init(this.$refs.linechart);
            barCharts.setOption({
                xAxis: {
                    type: 'category',
                    show: false, 
                     //隐藏X轴                    
                },
                yAxis: {
                    show: false,  //隐藏                    
                },
                series: [
                    {
                        //图标形式-柱状图
                        type: "line",
                        data: [10, 7, 33, 12, 48, 9, 29, 10, 44],
                        smooth: true,
                        //拐点的样式的设置
                        itemStyle: {
                            opacity: 0,
                        },
                        //线条的样式
                        lineStyle: {
                            color: "purple",
                        },
                        //填充颜色设置,渐变
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "purple", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#fff", // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },



                    },
                ],
                //布局调试
                grid: {
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 0,
                },
            });
        },
    },


}
</script>

<style scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>